﻿@page
@model WeatherModel
@{
    ViewData["Title"] = "Weather Forecast";
}

<h1>@ViewData["Title"]</h1>
<p>
    Start date:
    <input id="fromDate" placeholder="yyyy-MM-dd"/>
    Forecast length:
    <select id="days" title="Length of Forecast">
        <option value="">default</option>
        <option value="1">1 day</option>
        <option value="3">3 days</option>
        <option value="7">7 days</option>
        <option value="14">14 days</option>
        <option value="30">30 days</option>
    </select>
    <button onclick="getForecast();">Get Forecast</button>
</p>


@if (Model.RequestException != null)
{
    <h2 class="alert-danger">Error</h2>
    <pre>@Model.RequestException.ToString()</pre>
}
else
{
    <table class="table">
        <tr class="">
            <th>Date</th>
            <th>Summary</th>
            <th>&#176;F</th>
            <th>&#176;C</th>
        </tr>
        @foreach (WeatherForecast forecast in Model.Forecasts)
        {
            <tr>
                <td>@forecast.Date</td>
                <td>@forecast.Summary</td>
                <td>@forecast.TemperatureF</td>
                <td>@forecast.TemperatureC</td>
            </tr>
        }
    </table>
}

@section Scripts
{
    <script>
        function getForecast() {
            if ('URLSearchParams' in window) {
                var searchParams = new URLSearchParams(window.location.search);
                searchParams.set("days", $("#days").val());
                searchParams.set("fromDate", $("#fromDate").val());
                window.location.search = searchParams.toString();
            }
        }
        $(function () {
            $("#fromDate").val("@Model.ForecastStartDate");
            $("#days").val("@Model.DaysSelected");
        });
    </script>
}
